<template>
  <div class="scrollout">
    <el-form class="formList" ref="editData">
      <el-form
        :model="$attrs"
        size="mini"
        label-width="100px"
        ref="formList"
        @submit.native.prevent
      >
        <keywords :show="$attrs.show" ref="keywords" title="关键词"></keywords>
        <formChekbox title="来源" type="1" :fromlist="fromlist"></formChekbox>
        <dateTime type="2" title="发布时间"></dateTime>
        <dateTime type="3" title="索引时间"></dateTime>
        <selectArea
          title="选择地域："
          lazyLoad="false"
          type="4"
          :formData="formData"
          @setNewFormData="setNewFormData"
          :defaultProps="defaultProps"
          :titleName="titleName"
        >
        </selectArea>
        <div style="display:flex">
          <el-row>
            <el-col :span="12">
              <formSelect
                title="标题劫持："
                type="5"
                content="请选择"
                :selectData="selectData"
              >
              </formSelect>
            </el-col>
            <el-col :span="12">
              <formSelect
                title="来源条件："
                type="6"
                content="请选择"
                :selectData="selectData1"
              >
              </formSelect>
            </el-col>
          </el-row>
        </div>
        <formChekbox title="情感属性" type="7" :fromlist="fromlist">
        </formChekbox>
        <el-form-item label="选择平台：">
          <div style="display:flex">
            <formSelect title="" type="8" content="请选择用户名"> </formSelect>
            <formSelect title="" type="9" content="请选择平台"></formSelect>
            <formSelect title="" type="10" content="请选择热点事件">
            </formSelect>
          </div>
        </el-form-item>
        <el-form-item>
          <selectArea
            :formData="formData"
            title=""
            @setNewFormData="setNewFormData"
            lazyLoad="true"
            type="11"
            :defaultProps="defaultProps"
            :titleName="titleName1"
          >
          </selectArea>
        </el-form-item>
        <el-form-item label="采集配置：">
          <el-row>
            <el-col :span="8">
              <formSelect title="" type="12" content="全部来源"></formSelect>
            </el-col>
            <el-col :span="5">
              <selectArea
                :formData="formData"
                title=""
                lazyLoad="false"
                type="13"
                @setNewFormData="setNewFormData"
                :defaultProps="defaultProps"
                :titleName="titleName2"
              >
              </selectArea>
            </el-col>
            <el-col :span="8">
              <formSelect
                title=""
                type="14"
                content="站点归属"
                :selectData="selectData3"
              ></formSelect>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="媒体权重：">
          <el-row>
            <el-col :span="10">
              <formNumber type="15"></formNumber>
            </el-col>
            <el-col :span="12">
              <formSelect
                title="发布状态："
                type="16"
                content="发布状态"
                :selectData="selectData4"
              ></formSelect>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="选择站点：">
          <div style="display:flex">
            <selectArea
              :formData="formData"
              style="flex-direction:row"
              title=""
              lazyLoad="true"
              type="17"
              :defaultProps="defaultProps"
              @setNewFormData="setNewFormData"
              :titleName="titleName3"
            >
            </selectArea>
            <selectArea
              :formData="formData"
              style="flex-direction:row;margin-left:10px;"
              title=""
              lazyLoad="false"
              type="20"
              :defaultProps="defaultProps"
              @setNewFormData="setNewFormData"
              :titleName="titleName4"
            >
            </selectArea>
          </div>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <!-- <formSelect
              title="错误类型："
              type="18"
              content="请选择"
              :selectData="selectData5"
            ></formSelect> -->
            <el-form-item label="错误类型：">
              <dropTree :treeList="treeList"></dropTree>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <formSelect
              title="敏感类型："
              type="19"
              content="请选择"
              :selectData="selectData6"
            ></formSelect>
          </el-col>
        </el-row>
        <el-row>
          <result></result>
        </el-row>
      </el-form>
    </el-form>
  </div>
</template>

<script>
import keywords from '@/components/conditionComponents/keywords.vue'
import formChekbox from '@/components/conditionComponents/formChekbox.vue'
import dateTime from '@/components/conditionComponents/dateTime.vue'
import selectArea from '@/components/conditionComponents/area.vue'
import formSelect from '@/components/conditionComponents/formSelect.vue'
import formNumber from '@/components/conditionComponents/formNumber.vue'
import dropTree from '@/components/conditionComponents/dropTree.vue'
import result from '@/components/chartsType/result.vue'
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapMutations, mapActions } = createNamespacedHelpers('charts')
export default {
  name: 'formList',
  inheritAttrs: false,
  data() {
    return {
      treeList: {
        // 错误类型的参数
        title: '错误类型',
        lazyLoad: false,
        type: '18',
        defaultProps: {
          id: 'id',
          children: 'children', // 子节点
          label: 'lable', // 标签文本的内容
          isLeaf: 'leaf' // 是否判断叶子节点
        }
      },
      platform: '',
      seshow: true,
      defaultProps: {
        id: 'id',
        children: 'children', // 子节点
        label: 'lable', // 标签文本的内容
        isLeaf: 'leaf' // 是否判断叶子节点
      },
      titleName: [
        { id: '0', label: '内容地域' },
        { id: '1', label: 'ICP地域' },
        { id: '2', label: '泛主题地域' },
        { id: '3', label: '确主题地域' }
      ],
      titleName1: [
        { id: '0', label: '选择模块' },
        { id: '1', label: '选择公司' },
        { id: '2', label: '选择产品' },
        { id: '3', label: '选择人物' }
      ],
      titleName2: [{ id: '0', label: '信息采集位置' }],
      titleName3: [{ id: '0', label: '站点信息' }],
      titleName4: [{ id: '1', label: '特殊站点' }],
      selectData: [
        {
          lable: '全部',
          id: '1'
        },
        {
          lable: '劫持文章',
          id: '3'
        },
        {
          lable: '非劫持文章',
          id: '2'
        }
      ],
      selectData1: [
        {
          lable: '全部',
          id: '1'
        },
        {
          lable: '发布与版权一致',
          id: '2'
        }
      ],
      selectData2: [
        {
          lable: '选项一',
          id: '1'
        },
        {
          lable: '选项二',
          id: '2'
        }
      ],
      selectData3: [
        {
          lable: '国内',
          id: '0'
        },
        {
          lable: '国外',
          id: '1'
        }
      ],
      selectData4: [
        {
          lable: '删除状态',
          id: '-1'
        },
        {
          lable: '未删',
          id: '0'
        },
        {
          lable: '已删',
          id: '1'
        },
        {
          lable: '已屏蔽',
          id: '2'
        }
      ],
      selectData6: [
        {
          lable: '全部',
          id: '1'
        },
        {
          lable: '非敏感',
          id: '0'
        },
        {
          lable: '敏感',
          id: '2'
        }
      ],
      fromlist: [
        {
          lable: '中性',
          id: '0'
        },
        {
          lable: '正面',
          id: '1'
        },
        {
          lable: '负面',
          id: '2'
        }
      ]
    }
  },
  methods: {
    setPlatval(data) {
      this.seshow = false
      this.platform = data
      this.$nextTick(() => {
        this.seshow = true
      })
    },
    ...mapMutations(['setNewFormData'])
  },
  computed: {
    ...mapState(['formData'])
  },
  components: {
    keywords,
    formChekbox,
    dateTime,
    selectArea,
    formSelect,
    formNumber,
    result,
    dropTree
  }
}
</script>

<style scoped>
.formList {
  max-height: 500px;
  overflow: auto;
}
/*滚动条样式*/
.formList::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}

.formList::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.formList::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
